<template>
  <div>
    <button
      v-for="(item, index) in tabs"
      :key="index"
      @click="currentTab = item.comName"
    >
      {{ item.name }}
    </button>
    <component :is="currentTab" class="tab"></component>
  </div>
</template>

<script setup lang="ts">
import ComA from './components/ComA.vue'
import ComB from './components/ComB.vue'
import { reactive, shallowRef } from 'vue'

// reactive 会使数据变成响应式，此处为了节省性能开销，可以使用 shallowRef 或者 markRaw 跳过 proxy 代理
const currentTab = shallowRef(ComA)
const tabs = reactive([
  {
    name: 'ComA',
    comName: shallowRef(ComA)
  },
  {
    name: 'ComB',
    comName: shallowRef(ComB)
  },
])
</script>

<style scoped>
</style>